<template>
	<uni-popup type="bottom" ref="pay_pop_tabStatus" @change="closePop">
		<view class="pop_wrap" :style="{backgroundImage: styleStr()}">
		<!-- <view class="pop_wrap"> -->
			<view class="title">
				<view class="title_item">
					<view class="">
						确认支付
					</view>
					<!-- <view class="line"></view> -->
				</view>
				<view class="title_item last" @tap='yincang'>
					<view class="">
						折叠
					</view>
					<image :src="iconurl + '/static/newImg/zhankai.png'" mode="aspectFill"></image>
				</view>
			</view>
		<!-- 	<view class="border">
				<image :src="iconurl + '/static/newImg/border.png'" mode="aspectFill"></image>
			</view> -->
			<view style="overflow-y: auto;height: 780rpx;">
				<view class="section_cont">
					<view class="sec_left">
						<image :src="mangheimg" mode="aspectFill"></image>
					</view>
					<view class="sec_right">
						<view class="navname">{{manghename}}</view>
						<view class="name" v-if="mangheTitle">{{mangheTitle}}</view>
						<view class="price-num flex-j-b flex-a-c">
							<view class="price flex-a-c">
					
								<text class="of-t-w"><text class="paidou">￥</text>{{manghejiage}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom_right">
					<view class="bottom_num" :class="{ 'bottom-show': isMaxBeishu }">
						最大倍数为x{{maxbeishu}}
					</view>
					<!-- <u-number-box :step="1" class='bottom_content' color='#000' bg-color='#d8dfeb' size='30' :min='1'
						v-model="manghebs" @change="changeNumber">
					</u-number-box> -->
					<uni-number-box :step="1" class='bottom_content' background="#d8dfeb" color="#000" size='30' :min='1' :max='maxbeishu'
						v-model="manghebsed" @blur="changeNumber" @change="handleManghebsedChange"></uni-number-box>
					<text class="kaixiangtext">倍开箱</text>
					<view class="num">
						获取某一商品数量x{{manghebsed}}
					</view>
				</view>
				<view class="bottom_box">
					<view class="bottom_item">
						<view class="bottom_left">
							优惠券
						</view>
						<view class="bottom_text" v-if="xuanzeyouhui" @click='chooseCoupon'>
							- {{cppbox.sub_price}} 大王币
						</view>
						<view class="bottom_right" @click='chooseCoupon' v-else>
							<view class="choose">选择优惠券</view>
							<image :src="iconurl + '/static/newImg/wei.png'" mode="aspectFill"></image>
						</view>
					</view>
					<view class="bottom_item">
						<view class="bottom_left">
							合计
						</view>
						<view class="bottom_right">
							<view class="bottom_num1" style="color: #F46E13;">
								￥
							</view>
							<view class="bottom_text" style="font-size: 38rpx;color: #F46E13;" v-if="xuanzeyouhui">
								{{choiceYouHui()}}
							</view>
							<view class="bottom_text" style="font-size: 38rpx;color: #F46E13;" v-else>
								{{(manghejiage * manghebsed).toFixed(2)}}
							</view>
						</view>
					</view>

					<!-- <view class="tab_xieyi"  style="background-color: red;" @click="handleBox">
						<template v-if="show">
							<image :src="iconurl + '/static/newImg/weixuan.png'" mode="aspectFill"></image>
						</template>
						<template v-else>
							<image :src="iconurl + '/static/newImg/yes.png'" mode="aspectFill"></image>
						</template>
							<text class="read">已阅读并同意1</text>
							<text style="color: #6792DD;" @click="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
					</view> -->
					<view class="tab_xieyi" @click="goCheck">
							<image :src=" iconurl + '/static/index/pzselect3.png'" v-if="xieyiStu == false"></image>
							<image :src=" iconurl + '/static/index/pzselect4.png'" v-else></image>
							<view class="" style="color: white; height: 100rpx; line-height: 100rpx;">已阅读并同意
								<text style="color: #077EE6;"
									@click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
							</view>
						</view>
						<!-- @click.stop="goUrl('/userPage/user/agreement?id=2')" -->
				</view>
			</view>
			<view class="but_box">
				<!-- <image src="@/static/newImg/openPay.png" mode="aspectFill" @click='openBox' class="openNew"></image> -->
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: ['swiperCurrent', 'cppbox','manghebs'],
		data() {
			return {
				box_id: 0,
				priceList: {},
				show: true, //是否勾选协议
				manghename: '',
				// manghetitle:'',
				manghejiage: 0,
				// manghebs: 1,
				manghezj: 0,
				mangheimg: '',
				mangheTitle:'',
				youhui: 0,
				xuanzeyouhui: false,
				order_id: 0,
				iconurl: this.$configs.urls,
				maxbeishu:0,//最大倍数
				manghebsed: 0,
				isMaxBeishu: false,
				xieyiStu:false
			}
		},
		mounted() { 
			if( JSON.stringify(this.cppbox) == "{}"){
				this.xuanzeyouhui = false
			}else{
				this.xuanzeyouhui = true
			}
			
			this.manghebsed = this.manghebs
			this.open()
			this.getlist()
			
		},
		destroyed() {
			this.yincang()
		},
		methods: {
			goUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		goCheck() {
				this.xieyiStu = !this.xieyiStu;
			},
		handleManghebsedChange(e) {
			if(this.temp_isTime) {
				clearTimeout(this.temp_isTime)
			}
			this.isMaxBeishu = true
			this.temp_isTime = setTimeout(() => {
				this.isMaxBeishu = false
			}, 3000)
		},
			closePop(e){
				const { show } = e
				if(show === false) {
					this.$parent.pay_popup_show = false
				}
			},
			choiceYouHui(){
				let num = (this.manghejiage * this.manghebsed - this.cppbox.sub_price).toFixed(2)
				if(num < 0){
					num = 0
				}
				return num
			},
			changeNumber(e){
				if( e.detail.value > this.maxbeishu){
					uni.showToast({
						title: '已达到最大倍数',
						duration: 2000,
						icon:'none'
					});
					return
				}
			},
			styleStr(){file:
				return `url(http://mh.qingfentool.vip/upload/image/20221228/46af0106af3854a55b17f3062388b336.png)`
			},
			open() {
				this.$refs.pay_pop_tabStatus.open();
			},
			//点击勾选协议
			handleBox() {
				this.show = !this.show
			},
			//点击选择优惠券
			chooseCoupon() {
				this.$parent.pay_popup_show = false
				this.$parent.youhuiShow = true
				this.$emit('getcpp', this.manghebsed)
			},
			yincang() {
				this.$parent.pay_popup_show = false
				// this.$refs.pay_pop_tabStatus.close();
			},
			getlist() {
				let data = {
					cat_id: 1
				}
				this.$Request.get(this.$api.index.defaultindex, data).then(res => {
					this.priceList = res.data.list
					for (let i = 0; i <= this.priceList.length - 1; i++) {
						if (this.swiperCurrent == i) {
							this.box_id = this.priceList[i].box_id
							this.mangheimg = this.priceList[i].cover_pic
							this.manghename = this.priceList[i].name
							this.manghejiage = this.priceList[i].price
							this.maxbeishu =  this.priceList[i].multiple
							this.mangheTitle = this.priceList[i].subtitle
						}
					}
				})
			},
			openBox() {
				if (this.xieyiStu == false) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none'
					});
					return
				}
				let data = {
					box_id: this.box_id,
					pay_mode: 1,
					pay_type: 3,
					multiple: this.manghebsed, //倍数
					user_coupon_id: this.cppbox.user_coupon_id,
					invite_code: uni.getStorageSync('invite_code'),
					idef: uni.getStorageSync('idef')
				};
				this.$Request.post(this.$api.mhapi.newSubmit, data).then(res => {
					if (res.data.is_prohibit_pay == 1) {
						uni.navigateTo({
							url: '/userPage/user/balance?fromPage=0&tabIndex=1&heji_num=' + res.data.paidou + '&box_id=' + this.box_id + '&data= ' + JSON.stringify(data)
						});
						return;
					}
					if (res.data.status == 1) {
						this.order_id = res.data.order_id
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
						let data = {
							order_id: this.order_id,
							beishu: this.manghebsed,
							box_id: this.box_id,
						}
						this.$emit('jieguo', data)
						this.xuanzeyouhui = false
					}
				});

				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop_wrap {
		height: 1040rpx;
		// background-image: url('https://pd.pdaxiang.com/upload/static/newImg/popBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 64rpx 0;
	}

	.num {
		width: 290rpx;
		height: 47rpx;
		display: flex;
		justify-content: center;
		position: absolute;
		left: 236rpx;
		bottom: 437rpx;
		/* border-radius: 50rpx; */
		background: #f19613;
		color: white;
		border-radius: 50rpx;
		/* border-radius: 50rpx; */
		align-items: center;
	}


	.section_cont {
		width: 750rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		position: relative;
		background: linear-gradient(90deg, rgba(255, 225, 255, 0.15), rgba(255, 225, 255, 0.15));
		width: 670rpx;
		height: 258rpx;
		border-radius: 10rpx;
		padding: 20rpx;

		.right_top {
			width: 100rpx;
			height: 50rpx;
			background: #ff5123;
			font-size: 24rpx;
			color: #000;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			border-radius: 20rpx;
		}

		.right_bom {
			display: flex;
			align-items: center;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
				color: #a7d402;
			}
		}

	
		.sec_left {
			image {
				width: 212rpx;
				height: 212rpx;
				border: 1rpx solid #D1D1D1;
				border-radius: 8rpx;
				background-color: #fff;
			}
		}

		.sec_right {
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			color: #ffffff;

			.navname {
				font-size: 30rpx;
				font-weight: 700;
			}

			.name {
				font-size: 26rpx;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				margin: 30rpx 0;

			}

			.time {
				font-size: 24rpx;
				color: #ff5123;
				margin-top: 15rpx;
			}

			.price-num {
				color: #ffffff;
				.price {
					text {
						max-width: 150rpx;
						font-size: 34rpx;
						color: #21C8C1;
					}

					.of-t-w {
						font-size: 38rpx;
					}

					.paidou {
						font-size: 38rpx;
					}

					margin-top: 10rpx;
				}

				.number {
					font-size: 34rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.bottom_box {
		padding: 30rpx 20rpx;
		background: linear-gradient(90deg, rgba(255, 225, 255, 0.15), rgba(255, 225, 255, 0.15));
		width: 670rpx;
		height: 210rpx;
		margin: 0 auto;
		margin-top: -25rpx;
		border-radius: 10rpx;

		.bottom_item {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.bottom_left {
				width: 120rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #ffffff;
			}

			.bottom_text {
				justify-content: flex-end;
				margin-left: auto;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				line-height: 50rpx;
				font-weight: bold;
				color: #21C8C1;
			}

			.bottom_right {
				justify-content: flex-end;
				margin-left: auto;
				display: flex;
				align-items: center;
				color: #ffffff;

				.bottom_content {
					height: 50rpx;

				}
				
				

				text {
					margin: 0 16rpx;
					font-size: 24rpx;
					height: 50rpx;
					font-weight: bold;
					line-height: 50rpx;
				}


				.bottom_num1 {
					width: 22rpx;
					height: 50rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #21C8C1;
					line-height: 50rpx;
					margin-right: 10rpx;
				}


				image {
					width: 14rpx;
					height: 22rpx;
					margin-top: 20rpx;
					margin-left: 10rpx;
				}

				.choose {
					width: 150rpx;
					height: 28rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #A7C9EB;
				}
			}
		}
	}
	.tab_xieyi {
		height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 29rpx;
			position: absolute;
			left: 194rpx;
			bottom: 160rpx;
			z-index: 600;
			// padding: 20rpx 20rpx 0rpx 0rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-left: 20rpx;
			}
		}

	.agreement_box {
		width: 320rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 30rpx 0;
		margin: auto;
		text-align: center;
		z-index: 9999;

		image {
			width: 33rpx;
			height: 33rpx;
			margin-right: 20rpx;
		}

		.text {
			width: 300rpx;
			height: 33rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.but_box {
		width: 100%;
		height: 190rpx;
		// background-image: url('/static/newImg/butBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 300;
		// padding: 30rpx 40rpx 0;

		.change {
			width: 281rpx;
			height: 107rpx;
			margin-top: 40rpx;
		}

		.open {
			width: 360rpx;
			height: 106rpx;
			margin-top: 40rpx;
		}

		.openNew {
			width: 489rpx;
			height: 106rpx;
			margin: 0 auto;
			margin-top: 26rpx;
		}

	}



	.title {
		display: flex;
		align-items: center;
		padding: 0 30rpx 20rpx;

		.title_item {
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 50rpx;
			color: #ffffff;

			.line {
				background-color: #30F5FF;
				width: 50rpx;
				height: 8rpx;
				margin-left: 30rpx;
			}
		}

		.title_item:nth-last-child(1) {
			margin-right: 0;
		}

		.last {
			justify-content: flex-end;
			margin-left: auto;
			font-size: 26rpx;
			font-weight: 300;
			display: flex;
			align-items: center;
			color: #ACD6F4;

			image {
				width: 18rpx;
				height: 16rpx;
				margin-left: 12rpx;
			}
		}
	}

	.border {
		width: 670rpx;
		height: 14rpx;
		margin-left: 40rpx;
		margin-bottom: 10rpx;

		image {
			width: 670rpx;
			height: 14rpx;
		}
	}

	.kaixiangtext {
		position: relative;
		left: 372rpx;
		top: -60rpx;
		font-size: 40rpx;
		color: #ffffff;
	}

	.bottom_num {
		width: 238rpx;
		height: 50rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: white;
		line-height: 46rpx;
		text-align: center;
		// background-image: url('/static/newImg/beishu.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		left: 459rpx;
		visibility: hidden;
	}
	.bottom_num.bottom-show {
		visibility: visible;
	}
	
</style>
